<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/aui_font.css">
    <link rel="stylesheet" href="../../css/news.css">
    <link rel="stylesheet" href="../../css/chengyuan.css">
    <style>
        .list-title {
            padding: 10px;
            background: #f3f3f3;
            color: #757575;
        }
    </style>
</head>

<body>
    <div id="view" v-cloak>
        <header>
            <i class="aui-iconfont aui-icon-left" onclick="_closeToWin();"></i>
            <span>{{_i18n('家族成员')}}（{{ffList.length}}{{_i18n('人')}}）</span>
        </header>
        <div v-for="(h, hindex) in hList" v-if="h.list && h.list.length>0">
            <p class="list-title">{{h.title}}</p>
            <div class="list">
                <div class="item" v-for="(m, index) in h.list" @click="goUserInfo(m.id, m.name, m.sex)" v-if="m.id">
                    <img class="avatar" :src="returnImg(m.avatar)" onerror="this.src='../../image/touxiang.png'" alt="">
                    <div class="right">
                        <div class="info">
                            <div class="username">{{m.name}}
                                <span class="new-fuhao" v-if="m.charmGrade"><img :src="returnImg(m.charmIcon)" onerror="this.src='../../image/icon/meili.png'" alt=""></span>
                                <span class="new-fuhao" v-if="m.tycoonGrade"><img :src="returnImg(m.tycoonIcon)" onerror="this.src='../../image/icon/tuhao.png'" alt=""></span>
                                <img v-if="m.is_noble" :src="returnImg(m.noble_icon)" class="new-noble" onerror="this.src='../image/error-img.png'" alt="">
                            </div>
                            <div class="tag">
                                <span class="boy-tag girl-tag" v-if="m.sex == '女'" :style="{backgroundImage: `url('${_i18nImg('../../image/icon/girl.png')}')`}">{{m.age}}</span>
                                <span class="boy-tag" v-else>{{m.age}}</span>
                            </div>
                        </div>
                        <div class="juese">
                            <button class="btn" v-if="(m.identity==0 && identity>0) || (m.identity>0 && identity<m.identity) && identity!=0" @click.stop="caozuo(m)">操作</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <p class="list-title">{{_i18n('群成员')}}</p>
        <div class="list">
            <div class="item" v-for="(m, index) in ffList" v-if="m.identity==0 && m.id" @click="goUserInfo(m.id, m.name, m.sex)">
                <img class="avatar" :src="returnImg(m.avatar)" onerror="this.src='../../image/touxiang.png'" alt="">
                <div class="right">
                    <div class="info">
                        <div class="username">{{m.name}}
                            <span class="new-fuhao" v-if="m.charmGrade"><img :src="returnImg(m.charmIcon)" onerror="this.src='../../image/icon/meili.png'" alt=""></span>
                            <span class="new-fuhao" v-if="m.tycoonGrade"><img :src="returnImg(m.tycoonIcon)" onerror="this.src='../../image/icon/tuhao.png'" alt=""></span>
                            <img v-if="m.is_noble" :src="returnImg(m.noble_icon)" class="new-noble" onerror="this.src='../image/error-img.png'" alt="">
                        </div>
                        <div class="tag">
                            <span class="boy-tag girl-tag" v-if="m.sex == '女'" :style="{backgroundImage: `url('${_i18nImg('../../image/icon/girl.png')}')`}">{{m.age}}</span>
                            <span class="boy-tag" v-else>{{m.age}}</span>
                        </div>
                        <!-- <div class="todayactive">今日活跃度：100</div> -->
                    </div>
                    <div class="juese">
                        <!-- <span v-if="m.identity==1">族长</span>
                        <span v-else-if="m.identity==2">副族长</span>
                        <span v-else-if="m.identity==3">长老</span>
                        <span v-else>成员</span> -->
                        <button class="btn" v-if="(m.identity==0 && identity>0) || (m.identity>0 && identity<m.identity) && identity!=0" @click.stop="caozuo(m)">操作</button>
                    </div>
                </div>
            </div>
            <!-- <div class="item" v-for="item in 10">
                <img class="avatar" src="../../image/touxiang.png" alt="">
                <div class="right">
                    <div class="info">
                        <div class="username">奇偶IE个</div>
                        <div class="tag">
                            <div class="tagitem">
                                <img src="../../image/icon/ic_male_date.png" alt="">
                                25
                            </div>
                        </div>
                        <div class="todayactive">今日活跃度：0</div>
                    </div>
                    <div class="juese">

                    </div>
                </div>
            </div> -->
        </div>
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/vue.js"></script>

<script>
    var view = new Vue({
        el: '#view',
        data: {
            imgurl: imgurl,
            ffList: [],
            ffInfo: {},
            ios: 1, // 1上架 0非上架
            identity: 0,
            id: 0,
            hList: {
                '族长': [],
                '副族长': [],
                '长老': []
            }
        },
        methods: {
            caozuo(data) {
                var _this = this;
                var ban = data.ban_chat == 1 ? '解除禁言' : '禁言';
                var buttons = [ban, '踢人'];
                _action('', buttons, function(bIndex) {
                    if (bIndex != buttons.length + 1) {
                        if (bIndex == 1) {
                            banMen(data);
                        } else {
                            reMen(data)
                        }
                    }
                })
            },
            // 跳转 查看用户详情
            goUserInfo: function(id, name, sex) {
                go_userInfo(id, name, sex)
            },
            // 跳转
            _url: function(param, url) {
                _url(param, url);
            },
            // 返回图片路径
            returnImg: function(url) {
                return returnImg(url);
            },
        }
    })
    apiready = function() {
        $api.fixStatusBar($api.dom('#view'));
        if (api.pageParam['identity']) {
            view.identity = api.pageParam['identity'];
        }
        view.id = api.pageParam['id'];

        getHeightMan()

        _shangla(function() {
            _lists('api/cluster/users', 1, 1, {
                id: view.id
            });
        })

        _scrollToBottom(function() {
            if (heigutgao == 1) {
                pagenum++;
                _lists('api/cluster/users', pagenum, '', {
                    id: view.id
                });
            }
        })

    }

    // 禁言
    function banMen(data) {
        _ajax('api/Family/changeChat', function(ret, err) {
            _msg(ret.msg);
            if (ret && ret.code == 200) {
                data.ban_chat = data.ban_chat ? 0 : 1;
            }
        }, {
            id: data.id,
            user_id: $api.getStorage('userid'),
            cluster_id: view.id
        })
    }
    // 踢人
    function reMen(data) {
        _ajax('api/Family/remove', function(ret, err) {
            _msg(ret.msg);
            if (ret && ret.code == 200) {
                data.id = 0;
                view.ffList.length--;
            }
        }, {
            id: data.id,
            user_id: $api.getStorage('userid'),
            cluster_id: view.id
        })
    }

    // 获取族长等
    function getHeightMan() {
        _ajax('api/cluster/users', function(ret, err) {
            if (ret && ret.code == 200) {
                var arr = []; //族长
                var brr = []; //副族长
                var crr = []; //长老
                for (var i = 0, len = ret.data.length; i < len; i++) {
                    if (ret.data[i].identity == 1) {
                        arr.push(ret.data[i]);
                    } else if (ret.data[i].identity == 2) {
                        brr.push(ret.data[i]);
                    } else if (ret.data[i].identity == 3) {
                        crr.push(ret.data[i]);
                    }
                }
                view.hList = [{
                    title: '族长',
                    list: arr
                }, {
                    title: '副族长',
                    list: brr
                }, {
                    title: '长老',
                    list: crr
                }]
            }
        }, {
            id: view.id,
            page: 1
        })
    }
</script>

</html>